<template>
  <a-form :model="form" :style="{width:'600px'}" @submit-success="handleSubmit" layout="vertical" ref="fromRef">
    <a-form-item>
      <a-image width="140" :src="homeIcon"/>
    </a-form-item>
    <a-form-item field="phone" label="账户" feedback
                 :rules="[{required:true,minLength:'3',maxLength:'11',message:'应当为3-10位之间'}]">
      <a-input v-model="form.phone" placeholder="请输入您的账号"/>
    </a-form-item>
    <a-form-item field="password" label="密码" feedback :rules="[{required:true,message:'密码为必填项'}]">
      <a-input v-model="form.password" placeholder="请输入您的密码" type="password"/>
    </a-form-item>
    <a-form-item field="isRead" feedback :rules="[{true:true,message:'请选勾选协议'}]">
      <a-checkbox v-model="form.isRead">
        同意《服务条款》《隐私政策》《儿童隐私政策》
      </a-checkbox>
    </a-form-item>
    <a-form-item>
      <a-button html-type="submit" :loading="loading">登录</a-button>
      <p style="margin-left: 20px">如账号未注册，将视为认同此条款，登录即为注册</p>
    </a-form-item>
  </a-form>
</template>

<script setup>
import {nextTick, reactive, ref, watch} from "vue";
import {useRouter} from "vue-router";
import {useStore} from "vuex";
import homeIcon from '~/assets/img/icon5.png'
import {toast} from "~/uilti/tool.js";

let props = defineProps({
  isshow: {
    default: {},
    type: Object
  }
})
const form = reactive({
  phone: '',
  password: '',
  isRead: false,
})
const loading = ref(false)
const router = useRouter()
const store = useStore()
const handleSubmit = () => {
  if (!form.isRead) return toast('请先勾选协议', 'error')
  loading.value = true
  store.dispatch('login', {phone: form.phone, password: form.password}).then(res => {
    console.log(res, 'res')
    toast('登录成功', 'success')
    router.push('/user')
  }).finally(() => {
    loading.value = false
  })

}

let laoding = reactive({
  taget: {
    demonstrate: false,
    dabelist: false
  }
})
let oobbjj = Object.assign({}, laoding, props.isshow)


// const standAlone = (props) => {
//   laoding.isshow = !props.isshow
// }
// watch(props, (newvalue, oldValue) => {
//
// })

</script>

<style scoped>

</style>